ラジオボタン、ボタン、テキストボックスの色を変更する
先週は、マウスポインタの位置によりチェックボックスの色を変更する方法を紹介しました。しかし、これはチェックボックスに限った話ではありません。ラジオボタンやボタン、テキストボックスの色を変更することも可能です。今週はこれらの色を変更する場合の例を紹介してみましょう。

→ ラジオボタンの色を変更する
 
ラジオボタンの色を変更する場合も、チェックボックスの色を変更する場合と手順は同じです。つまり、INPUTタグにスタイルシートを指定し(初期値の指定)、onMouseover、onMouseoutイベントを追加すれば完成です。
<INPUT type="radio" name="radio" style="background-color:#ffffff"
onMouseover="this.style.backgroundColor='#ff0000'"
onMouseout ="this.style.backgroundColor='#ffffff'">
<LABEL for="radio1">赤  </LABEL>

<INPUT type="radio" name="radio" style="background-color:#ffffff"
onMouseover="this.style.backgroundColor='#00ff00'"
onMouseout ="this.style.backgroundColor='#ffffff'">
<LABEL for="radio1">緑  </LABEL>

<INPUT type="radio" name="radio" style="background-color:#ffffff"
onMouseover="this.style.backgroundColor='#0000ff'"
onMouseout ="this.style.backgroundColor='#ffffff'">
<LABEL for="radio1">青</LABEL>


→ ボタンの色を変更する
 
同様の手順により、ボタンの色を変更することも可能です。ここでは、わざとonMouseoutイベントを追加しないことにより『隠し絵』のような表現手法を再現してみました。ソースは複雑そうにも思えますが、onMouseoverイベントによる色変更が追加されたINPUTタグが繰り返されているだけで、何も難しくはありません。
以下のボックスをマウスポインタでなぞってください。<BR>

<INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='orange'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='orange'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='blue'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='blue'"><BR>

<INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='orange'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='orange'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='blue'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='blue'"><BR>

<INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><BR>

<INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='red'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='red'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='green'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='green'"><BR>

<INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='red'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='red'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='silver'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='green'"><INPUT type="button" value="  " style="background-color:white" onMouseover="this.style.backgroundColor='green'">


→ テキストボックスの色を変更する
 
同様の手順でテキストボックスの色を変更することも可能です。色の初期値を『黒』に指定しておくと、初めはテキストボックス内に記述されている文字を隠しておき、マウスポインタがテキストボックス上に来たときだけ文字を表示させる、といった応用表現を作り出すことができます。ちょっとしたクイズであれば、これでも十分に機能するでしょう。試してみてください。
(問題)日本で一番高い山は?
<BR>
<BR>
『答え』はコチラ→→
<INPUT TYPE="text" value="富士山" STYLE="background-color:#000000"
onMouseover="this.style.backgroundColor='#ffffff'"
onMouseout ="this.style.backgroundColor='#000000'"

e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze